<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合约交友推荐 - 安全社交</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #3b82f6;
            --primary-light: #eff6ff;
            --secondary: #64748b;
            --light: #f8fafc;
            --dark: #1e293b;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --border: #e2e8f0;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f1f5f9;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .navbar {
            box-shadow: var(--shadow);
            background-color: white;
        }
        
        .container {
            padding: 2rem 0;
        }
        
        .section-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid var(--primary);
            display: inline-block;
        }
        
        .filter-bar {
            background-color: white;
            border-radius: 0.75rem;
            padding: 1rem;
            margin-bottom: 2rem;
            box-shadow: var(--shadow);
        }
        
        .filter-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
        }
        
        .filter-item {
            flex: 1;
            min-width: 200px;
        }
        
        .search-box {
            flex: 2;
            min-width: 250px;
        }
        
        .card {
            border: none;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 2rem;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .card-header {
            background-color: var(--primary-light);
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border);
        }
        
        .card-title {
            font-weight: 600;
            margin-bottom: 0;
        }
        
        .card-body {
            padding: 1.25rem;
        }
        
        .contract-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: var(--secondary);
        }
        
        .author-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .stats {
            display: flex;
            gap: 1rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .contract-content {
            margin-bottom: 1rem;
        }
        
        .contract-text {
            margin-bottom: 1rem;
            line-height: 1.7;
        }
        
        .image-container {
            border-radius: 0.5rem;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        
        .single-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .multi-image {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5rem;
        }
        
        .multi-image img {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }
        
        .no-image {
            background-color: #e2e8f0;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary);
        }
        
        .card-footer {
            background-color: white;
            padding: 1rem 1.25rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
        }
        
        .action-buttons {
            display: flex;
            gap: 1rem;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            color: var(--secondary);
            background: none;
            border: none;
            padding: 0.25rem 0.75rem;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: var(--danger);
        }
        
        .action-btn.bookmarked {
            color: var(--warning);
        }
        
        .featured-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background-color: var(--warning);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        /* 网格布局 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        /* 列表布局 */
        .list-layout .card {
            display: flex;
            height: 100%;
        }
        
        .list-layout .image-column {
            flex: 0 0 250px;
        }
        
        .list-layout .content-column {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-layout .card-body {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-layout .contract-content {
            flex: 1;
        }
        
        .list-layout .multi-image img {
            height: 100%;
        }
        
        /* 混合布局 */
        .hybrid-layout {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        .hybrid-large {
            grid-column: span 12;
            display: flex;
        }
        
        .hybrid-large .image-column {
            flex: 0 0 400px;
        }
        
        .hybrid-large .content-column {
            flex: 1;
        }
        
        .hybrid-medium {
            grid-column: span 6;
        }
        
        .hybrid-small {
            grid-column: span 4;
        }
        
        /* 布局切换按钮 */
        .layout-controls {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .layout-btn {
            background-color: white;
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .layout-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .hybrid-medium, .hybrid-small {
                grid-column: span 6;
            }
            
            .list-layout .card {
                flex-direction: column;
            }
            
            .list-layout .image-column {
                flex: 0 0 200px;
            }
        }
        
        @media (max-width: 768px) {
            .hybrid-large, .hybrid-medium, .hybrid-small {
                grid-column: span 12;
            }
            
            .hybrid-large {
                flex-direction: column;
            }
            
            .hybrid-large .image-column {
                flex: 0 0 200px;
            }
            
            .filter-item, .search-box {
                flex: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-handshake text-primary me-2"></i>合约社交
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">合约交友</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">安全中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">帮助指南</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-outline-primary">登录</button>
                    <button class="btn btn-primary">注册</button>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主要内容区 -->
    <div class="container">
        <h2 class="section-title">合约交友推荐</h2>
        
        <!-- 布局切换 -->
        <div class="layout-controls">
            <button class="layout-btn active" data-layout="grid">
                <i class="fas fa-th"></i> 网格布局
            </button>
            <button class="layout-btn" data-layout="list">
                <i class="fas fa-list"></i> 列表布局
            </button>
            <button class="layout-btn" data-layout="hybrid">
                <i class="fas fa-th-large"></i> 混合布局
            </button>
        </div>
        
        <!-- 筛选栏 -->
        <div class="filter-bar">
            <div class="filter-group">
                <div class="filter-item">
                    <select class="form-select">
                        <option>所有类型</option>
                        <option>兴趣伙伴</option>
                        <option>学习互助</option>
                        <option>活动同行</option>
                        <option>项目合作</option>
                    </select>
                </div>
                <div class="filter-item">
                    <select class="form-select">
                        <option>所有地区</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>广州</option>
                        <option>深圳</option>
                        <option>其他城市</option>
                    </select>
                </div>
                <div class="filter-item">
                    <select class="form-select">
                        <option>最新发布</option>
                        <option>最多浏览</option>
                        <option>最多收藏</option>
                        <option>最多评论</option>
                    </select>
                </div>
                <div class="search-box">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索合约交友...">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 网格布局 -->
        <div class="recommendation-container grid-layout active">
            <!-- 合约1 - 多图 -->
            <div class="card position-relative">
                <div class="featured-badge">推荐</div>
                <div class="card-header">
                    <h5 class="card-title">寻找摄影伙伴 - 周末户外采风</h5>
                </div>
                <div class="card-body">
                    <div class="contract-meta">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=1" alt="作者头像" class="author-avatar">
                            <span>李明</span>
                        </div>
                        <div class="stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i> 328
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i> 42
                            </div>
                        </div>
                    </div>
                    
                    <div class="contract-content">
                        <p class="contract-text">寻找摄影爱好者一起周末外出采风，主要拍摄自然风光和城市建筑。希望对方有一定摄影基础，有自己的设备，能互相交流学习。每次活动AA制，时间可协商。</p>
                        
                        <div class="image-container">
                            <div class="multi-image">
                                <img src="https://picsum.photos/300/300?random=10" alt="摄影作品1">
                                <img src="https://picsum.photos/300/300?random=11" alt="摄影作品2">
                                <img src="https://picsum.photos/300/300?random=12" alt="摄影作品3">
                                <img src="https://picsum.photos/300/300?random=13" alt="摄影作品4">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="action-buttons">
                        <button class="action-btn like-btn">
                            <i class="fas fa-heart"></i> 点赞 (86)
                        </button>
                        <button class="action-btn bookmark-btn">
                            <i class="fas fa-bookmark"></i> 收藏 (52)
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-comment"></i> 留言
                        </button>
                    </div>
                    <button class="btn btn-primary btn-sm">
                        联系TA
                    </button>
                </div>
            </div>
            
            <!-- 合约2 - 单图 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">寻找英语学习伙伴 - 每周线上交流</h5>
                </div>
                <div class="card-body">
                    <div class="contract-meta">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=2" alt="作者头像" class="author-avatar">
                            <span>张雪</span>
                        </div>
                        <div class="stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i> 512
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i> 78
                            </div>
                        </div>
                    </div>
                    
                    <div class="contract-content">
                        <p class="contract-text">本人英语水平雅思6.5，希望找一位水平相当的伙伴一起练习口语和写作。计划每周线上交流2-3次，每次1小时左右。有兴趣的朋友请联系我。</p>
                        
                        <div class="image-container">
                            <img src="https://picsum.photos/600/400?random=20" alt="英语学习资料" class="single-image">
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="action-buttons">
                        <button class="action-btn like-btn">
                            <i class="fas fa-heart"></i> 点赞 (124)
                        </button>
                        <button class="action-btn bookmark-btn">
                            <i class="fas fa-bookmark"></i> 收藏 (93)
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-comment"></i> 留言
                        </button>
                    </div>
                    <button class="btn btn-primary btn-sm">
                        联系TA
                    </button>
                </div>
            </div>
            
            <!-- 合约3 - 无图 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">寻找健身伙伴 - 每天早晨跑步</h5>
                </div>
                <div class="card-body">
                    <div class="contract-meta">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=3" alt="作者头像" class="author-avatar">
                            <span>王强</span>
                        </div>
                        <div class="stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i> 276
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i> 35
                            </div>
                        </div>
                    </div>
                    
                    <div class="contract-content">
                        <p class="contract-text">本人住在朝阳区，每天早晨6点半在奥林匹克森林公园跑步，寻找一位能长期坚持的伙伴一起锻炼。要求：有基础，能跑5公里以上，男女不限。</p>
                        
                        <div class="image-container no-image">
                            <i class="fas fa-running fa-3x"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="action-buttons">
                        <button class="action-btn like-btn">
                            <i class="fas fa-heart"></i> 点赞 (76)
                        </button>
                        <button class="action-btn bookmark-btn">
                            <i class="fas fa-bookmark"></i> 收藏 (42)
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-comment"></i> 留言
                        </button>
                    </div>
                    <button class="btn btn-primary btn-sm">
                        联系TA
                    </button>
                </div>
            </div>
            
            <!-- 合约4 - 多图 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">寻找创业合作伙伴 - 互联网项目</h5>
                </div>
                <div class="card-body">
                    <div class="contract-meta">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=4" alt="作者头像" class="author-avatar">
                            <span>赵伟</span>
                        </div>
                        <div class="stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i> 843
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i> 127
                            </div>
                        </div>
                    </div>
                    
                    <div class="contract-content">
                        <p class="contract-text">本人有一个教育科技项目的创业想法，已有初步商业计划，现寻找技术合伙人（前端/后端开发）和运营合伙人一起推进。要求有相关经验，能投入足够时间，有创业热情。</p>
                        
                        <div class="image-container">
                            <div class="multi-image">
                                <img src="https://picsum.photos/300/300?random=30" alt="项目演示1">
                                <img src="https://picsum.photos/300/300?random=31" alt="项目演示2">
                                <img src="https://picsum.photos/300/300?random=32" alt="项目演示3">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="action-buttons">
                        <button class="action-btn like-btn">
                            <i class="fas fa-heart"></i> 点赞 (189)
                        </button>
                        <button class="action-btn bookmark-btn">
                            <i class="fas fa-bookmark"></i> 收藏 (156)
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-comment"></i> 留言
                        </button>
                    </div>
                    <button class="btn btn-primary btn-sm">
                        联系TA
                    </button>
                </div>
            </div>
            
            <!-- 合约5 - 单图 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">寻找读书会成员 - 每月共读一本书</h5>
                </div>
                <div class="card-body">
                    <div class="contract-meta">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=5" alt="作者头像" class="author-avatar">
                            <span>陈静</span>
                        </div>
                        <div class="stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i> 412
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i> 63
                            </div>
                        </div>
                    </div>
                    
                    <div class="contract-content">
                        <p class="contract-text">组建一个小型读书会，每月选择一本经典书籍共同阅读，月底组织一次线下讨论。希望成员能坚持阅读，积极参与讨论，有自己的见解。现有5名成员，再招3-5人。</p>
                        
                        <div class="image-container">
                            <img src="https://picsum.photos/600/400?random=40" alt="读书会照片" class="single-image">
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="action-buttons">
                        <button class="action-btn like-btn">
                            <i class="fas fa-heart"></i> 点赞 (98)
                        </button>
                        <button class="action-btn bookmark-btn">
                            <i class="fas fa-bookmark"></i> 收藏 (75)
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-comment"></i> 留言
                        </button>
                    </div>
                    <button class="btn btn-primary btn-sm">
                        联系TA
                    </button>
                </div>
            </div>
            
            <!-- 合约6 - 无图 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">寻找羽毛球球友 - 每周固定活动</h5>
                </div>
                <div class="card-body">
                    <div class="contract-meta">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=6" alt="作者头像" class="author-avatar">
                            <span>刘强</span>
                        </div>
                        <div class="stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i> 357
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i> 49
                            </div>
                        </div>
                    </div>
                    
                    <div class="contract-content">
                        <p class="contract-text">每周三晚上7-9点，周六下午2-4点在海淀区体育馆有羽毛球活动，寻找水平相当的球友加入。现有固定成员4人，费用AA制，有兴趣的朋友请联系。</p>
                        
                        <div class="image-container no-image">
                            <i class="fas fa-table-tennis fa-3x"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="action-buttons">
                        <button class="action-btn like-btn">
                            <i class="fas fa-heart"></i> 点赞 (87)
                        </button>
                        <button class="action-btn bookmark-btn">
                            <i class="fas fa-bookmark"></i> 收藏 (63)
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-comment"></i> 留言
                        </button>
                    </div>
                    <button class="btn btn-primary btn-sm">
                        联系TA
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 列表布局 (默认隐藏) -->
        <div class="recommendation-container list-layout">
            <!-- 合约1 - 多图 -->
            <div class="card">
                <div class="image-column">
                    <div class="multi-image h-100">
                        <img src="https://picsum.photos/300/300?random=10" alt="摄影作品1">
                        <img src="https://picsum.photos/300/300?random=11" alt="摄影作品2">
                        <img src="https://picsum.photos/300/300?random=12" alt="摄影作品3">
                        <img src="https://picsum.photos/300/300?random=13" alt="摄影作品4">
                    </div>
                </div>
                <div class="content-column">
                    <div class="card-header">
                        <h5 class="card-title">寻找摄影伙伴 - 周末户外采风</h5>
                    </div>
                    <div class="card-body">
                        <div class="contract-meta">
                            <div class="author-info">
                                <img src="https://picsum.photos/100/100?random=1" alt="作者头像" class="author-avatar">
                                <span>李明</span>
                            </div>
                            <div class="stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i> 328
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-comment"></i> 42
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-heart"></i> 86
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-bookmark"></i> 52
                                </div>
                            </div>
                        </div>
                        
                        <div class="contract-content">
                            <p class="contract-text">寻找摄影爱好者一起周末外出采风，主要拍摄自然风光和城市建筑。希望对方有一定摄影基础，有自己的设备，能互相交流学习。每次活动AA制，时间可协商。</p>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="action-buttons">
                            <button class="action-btn like-btn">
                                <i class="fas fa-heart"></i> 点赞
                            </button>
                            <button class="action-btn bookmark-btn">
                                <i class="fas fa-bookmark"></i> 收藏
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-comment"></i> 留言
                            </button>
                        </div>
                        <button class="btn btn-primary btn-sm">
                            联系TA
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 合约2 - 单图 -->
            <div class="card">
                <div class="image-column">
                    <img src="https://picsum.photos/600/400?random=20" alt="英语学习资料" class="h-100 w-100 object-cover">
                </div>
                <div class="content-column">
                    <div class="card-header">
                        <h5 class="card-title">寻找英语学习伙伴 - 每周线上交流</h5>
                    </div>
                    <div class="card-body">
                        <div class="contract-meta">
                            <div class="author-info">
                                <img src="https://picsum.photos/100/100?random=2" alt="作者头像" class="author-avatar">
                                <span>张雪</span>
                            </div>
                            <div class="stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i> 512
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-comment"></i> 78
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-heart"></i> 124
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-bookmark"></i> 93
                                </div>
                            </div>
                        </div>
                        
                        <div class="contract-content">
                            <p class="contract-text">本人英语水平雅思6.5，希望找一位水平相当的伙伴一起练习口语和写作。计划每周线上交流2-3次，每次1小时左右。有兴趣的朋友请联系我。</p>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="action-buttons">
                            <button class="action-btn like-btn">
                                <i class="fas fa-heart"></i> 点赞
                            </button>
                            <button class="action-btn bookmark-btn">
                                <i class="fas fa-bookmark"></i> 收藏
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-comment"></i> 留言
                            </button>
                        </div>
                        <button class="btn btn-primary btn-sm">
                            联系TA
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 合约3 - 无图 -->
            <div class="card">
                <div class="image-column no-image">
                    <i class="fas fa-running fa-3x"></i>
                </div>
                <div class="content-column">
                    <div class="card-header">
                        <h5 class="card-title">寻找健身伙伴 - 每天早晨跑步</h5>
                    </div>
                    <div class="card-body">
                        <div class="contract-meta">
                            <div class="author-info">
                                <img src="https://picsum.photos/100/100?random=3" alt="作者头像" class="author-avatar">
                                <span>王强</span>
                            </div>
                            <div class="stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i> 276
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-comment"></i> 35
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-heart"></i> 76
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-bookmark"></i> 42
                                </div>
                            </div>
                        </div>
                        
                        <div class="contract-content">
                            <p class="contract-text">本人住在朝阳区，每天早晨6点半在奥林匹克森林公园跑步，寻找一位能长期坚持的伙伴一起锻炼。要求：有基础，能跑5公里以上，男女不限。</p>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="action-buttons">
                            <button class="action-btn like-btn">
                                <i class="fas fa-heart"></i> 点赞
                            </button>
                            <button class="action-btn bookmark-btn">
                                <i class="fas fa-bookmark"></i> 收藏
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-comment"></i> 留言
                            </button>
                        </div>
                        <button class="btn btn-primary btn-sm">
                            联系TA
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 混合布局 (默认隐藏) -->
        <div class="recommendation-container hybrid-layout">
            <!-- 大尺寸合约 -->
            <div class="card hybrid-large">
                <div class="image-column">
                    <img src="https://picsum.photos/800/600?random=50" alt="创业项目" class="h-100 w-100 object-cover">
                </div>
                <div class="content-column">
                    <div class="card-header">
                        <h5 class="card-title">寻找创业合作伙伴 - 互联网项目</h5>
                    </div>
                    <div class="card-body">
                        <div class="contract-meta">
                            <div class="author-info">
                                <img src="https://picsum.photos/100/100?random=4" alt="作者头像" class="author-avatar">
                                <span>赵伟</span>
                            </div>
                            <div class="stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i> 843
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-comment"></i> 127
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-heart"></i> 189
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-bookmark"></i> 156
                                </div>
                            </div>
                        </div>
                        
                        <div class="contract-content">
                            <p class="contract-text">本人有一个教育科技项目的创业想法，已有初步商业计划，现寻找技术合伙人（前端/后端开发）和运营合伙人一起推进。要求有相关经验，能投入足够时间，有创业热情。</p>
                            
                            <div class="multi-image">
                                <img src="https://picsum.photos/300/300?random=30" alt="项目演示1">
                                <img src="https://picsum.photos/300/300?random=31" alt="项目演示2">
                                <img src="https://picsum.photos/300/300?random=32" alt="项目演示3">
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="action-buttons">
                            <button class="action-btn like-btn">
                                <i class="fas fa-heart"></i> 点赞
                            </button>
                            <button class="action-btn bookmark-btn">
                                <i class="fas fa-bookmark"></i> 收藏
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-comment"></i> 留言
                            </button>
                        </div>
                        <button class="btn btn-primary btn-sm">
                            联系TA
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 中尺寸合约1 -->
            <div class="card hybrid-medium">
                <div class="card-header">
                    <h5 class="card-title">寻找摄影伙伴 - 周末户外采风</h5>
                </div>
                <div class="card-body">
                    <div class="contract-meta">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=1" alt="作者头像" class="author-avatar">
                            <span>李明</span>
                        </div>
                        <div class="stats">
                            <i class="fas fa-eye"></i> 328
                            <i class="fas fa-comment ms-2"></i> 42
                        </div>
                    </div>
                    
                    <div class="contract-content">
                        <p class="contract-text">寻找摄影爱好者一起周末外出采风，主要拍摄自然风光和城市建筑。希望对方有一定摄影基础，有自己的设备。</p>
                        
                        <div class="multi-image">
                            <img src="https://picsum.photos/300/300?random=10" alt="摄影作品1">
                            <img src="https://picsum.photos/300/300?random=11" alt="摄影作品2">
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button class="action-btn like-btn">
                        <i class="fas fa-heart"></i> 86
                    </button>
                    <button class="action-btn bookmark-btn">
                        <i class="fas fa-bookmark"></i> 52
                    </button>
                    <button class="btn btn-primary btn-sm ms-auto">
                        联系TA
                    </button>
                </div>
            </div>
            
            <!-- 中尺寸合约2 -->
            <div class="card hybrid-medium">
                <div class="card-header">
                    <h5 class="card-title">寻找读书会成员 - 每月共读一本书</h5>
                </div>
                <div class="card-body">
                    <div class="contract-meta">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=5" alt="作者头像" class="author-avatar">
                            <span>陈静</span>
                        </div>
                        <div class="stats">
                            <i class="fas fa-eye"></i> 412
                            <i class="fas fa-comment ms-2"></i> 63
                        </div>
                    </div>
                    
                    <div class="contract-content">
                        <p class="contract-text">组建一个小型读书会，每月选择一本经典书籍共同阅读，月底组织一次线下讨论。希望成员能坚持阅读，积极参与讨论。</p>
                        
                        <img src="https://picsum.photos/600/400?random=40" alt="读书会照片" class="single-image w-100 h-48 object-cover rounded">
                    </div>
                </div>
                <div class="card-footer">
                    <button class="action-btn like-btn">
                        <i class="fas fa-heart"></i> 98
                    </button>
                    <button class="action-btn bookmark-btn">
                        <i class="fas fa-bookmark"></i> 75
                    </button>
                    <button class="btn btn-primary btn-sm ms-auto">
                        联系TA
                    </button>
                </div>
            </div>
            
            <!-- 小尺寸合约1 -->
            <div class="card hybrid-small">
                <div class="card-header">
                    <h5 class="card-title">寻找英语学习伙伴</h5>
                </div>
                <div class="card-body">
                    <div class="contract-meta">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=2" alt="作者头像" class="author-avatar">
                            <span>张雪</span>
                        </div>
                    </div>
                    
                    <div class="contract-content">
                        <p class="contract-text small">寻找英语学习伙伴，每周线上交流2-3次，雅思6.5水平左右。</p>
                        
                        <div class="no-image h-32">
                            <i class="fas fa-language fa-2x"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="action-buttons">
                        <button class="action-btn like-btn">
                            <i class="fas fa-heart"></i> 124
                        </button>
                        <button class="action-btn bookmark-btn">
                            <i class="fas fa-bookmark"></i> 93
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 小尺寸合约2 -->
            <div class="card hybrid-small">
                <div class="card-header">
                    <h5 class="card-title">寻找健身伙伴</h5>
                </div>
                <div class="card-body">
                    <div class="contract-meta">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=3" alt="作者头像" class="author-avatar">
                            <span>王强</span>
                        </div>
                    </div>
                    
                    <div class="contract-content">
                        <p class="contract-text small">每天早晨6点半在奥林匹克森林公园跑步，寻找能长期坚持的伙伴。</p>
                        
                        <div class="no-image h-32">
                            <i class="fas fa-running fa-2x"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="action-buttons">
                        <button class="action-btn like-btn">
                            <i class="fas fa-heart"></i> 76
                        </button>
                        <button class="action-btn bookmark-btn">
                            <i class="fas fa-bookmark"></i> 42
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 小尺寸合约3 -->
            <div class="card hybrid-small">
                <div class="card-header">
                    <h5 class="card-title">寻找羽毛球球友</h5>
                </div>
                <div class="card-body">
                    <div class="contract-meta">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=6" alt="作者头像" class="author-avatar">
                            <span>刘强</span>
                        </div>
                    </div>
                    
                    <div class="contract-content">
                        <p class="contract-text small">每周三晚上、周六下午有羽毛球活动，寻找水平相当的球友加入。</p>
                        
                        <div class="no-image h-32">
                            <i class="fas fa-table-tennis fa-2x"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="action-buttons">
                        <button class="action-btn like-btn">
                            <i class="fas fa-heart"></i> 87
                        </button>
                        <button class="action-btn bookmark-btn">
                            <i class="fas fa-bookmark"></i> 63
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="text-center mt-4">
            <button class="btn btn-outline-primary">
                <i class="fas fa-refresh me-2"></i> 加载更多合约
            </button>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 布局切换功能
            const layoutBtns = document.querySelectorAll('.layout-btn');
            const layoutContainers = document.querySelectorAll('.recommendation-container');
            
            layoutBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const layout = this.getAttribute('data-layout');
                    
                    // 更新按钮状态
                    layoutBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应的布局容器
                    layoutContainers.forEach(container => {
                        container.classList.remove('active');
                        container.style.display = 'none';
                    });
                    
                    document.querySelector(`.${layout}-layout`).style.display = 'grid';
                    document.querySelector(`.${layout}-layout`).classList.add('active');
                });
            });
            
            // 点赞功能
            const likeBtns = document.querySelectorAll('.like-btn');
            
            likeBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    
                    // 更新点赞数量
                    if (this.classList.contains('liked')) {
                        const text = this.innerHTML;
                        const count = parseInt(text.match(/\d+/)[0]);
                        this.innerHTML = text.replace(count, count + 1);
                    } else {
                        const text = this.innerHTML;
                        const count = parseInt(text.match(/\d+/)[0]);
                        this.innerHTML = text.replace(count, count - 1);
                    }
                });
            });
            
            // 收藏功能
            const bookmarkBtns = document.querySelectorAll('.bookmark-btn');
            
            bookmarkBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.classList.toggle('bookmarked');
                    
                    // 更新收藏数量
                    if (this.classList.contains('bookmarked')) {
                        const text = this.innerHTML;
                        const count = parseInt(text.match(/\d+/)[0]);
                        this.innerHTML = text.replace(count, count + 1);
                    } else {
                        const text = this.innerHTML;
                        const count = parseInt(text.match(/\d+/)[0]);
                        this.innerHTML = text.replace(count, count - 1);
                    }
                });
            });
            
            // 联系按钮功能
            const contactBtns = document.querySelectorAll('.btn-primary');
            
            contactBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const title = this.closest('.card').querySelector('.card-title').textContent;
                    alert(`正在联系 "${title}" 的发布者...`);
                });
            });
        });
    </script>
</body>
</html>
    
